

<template>
  <div class="box" style="background-color:#000; height:100vh;">
     <!-- 商品图 -->
    <div class="banner_video" >
        <div class="banner_title">
            <!-- <span @click="onClickVideo"  v-if="showBox">视频</span> -->
            <!-- <span @click="onClickImages">图片</span> -->
            <span @click="onClickVideo" :class="{'active':activeIndex==1}">视频</span>
            <!-- <span @click="onClickVideo" >视频</span> -->
            <span @click="onClickImages" :class="{'active':activeIndex==2}">图片</span>
        </div>
        
        <van-swipe :autoplay="0" v-if="showBox" @change="onChange">
          <van-swipe-item>
              <div class="input_video" v-if="goodsdetail.vedio_url && goodsdetail.vedio_url.length>0">
                <video-player
                  class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions"
                 
                ></video-player>
              </div>  
          </van-swipe-item>
          <van-swipe-item v-for="(image, index) in goodsdetail.goods_images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
        <div class="banner_image" v-if="showImage">
        <van-swipe :autoplay="1000">
          <van-swipe-item v-for="(image, index) in goodsdetail.goods_images" :key="index">
            <img v-lazy="image"  />
          </van-swipe-item>
        </van-swipe>
    </div>
    </div>
    
  </div>
</template>
<style lang="" scoped>
html,body  {
    background-color: #000;
}
.van-swipe-item{
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height:7.08rem;
  margin-top: 0.5rem;
}
.input_video {
  width: 100%;
  /* height: 20%; */
}
.banner_video {
  width: 100%;
  overflow: hidden;
}
.banner_title {
    color:#999999;
   margin: 0.7rem 0.7rem 0.1rem 0.7rem;
   text-align: center;
}
.banner_title span {
   margin: 0.25rem;
}
.active {
    color: #ffffff;
}

.w {
  overflow: hidden;
}
.w_con {
  margin-bottom: 0.98rem;
}
.banner_video img {
  width: 100%;
}
</style>

<script>
// import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'
import { Toast } from "vant";
import getData from "../../assets/js/axios";
import store from "@/store";

export default {
  name: "index",
  data() {
    empty: false
    return {
      activeIndex:1,
      showImage:false,
      showBox:true,
      fullscreen: false,
      attr_active: [], //选中下标
      attr_activeid: [], //属性id
      vedio_url: "",
      activeimg: true,
      attr_flag: true, //是否显示规格
      goodsdes: "",
      images: [
        // 'https://img.yzcdn.cn/vant/apple-1.jpg',
        // 'https://img.yzcdn.cn/vant/apple-2.jpg',
      ],

      goodsdetail: "",
      attr_info: "", //全部规格
      goodsid: "", //商品id
      coll: "", //收藏
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
        autoplay: true, //如果true,浏览器准备好时开始回放。
        autoplay: true, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "1:1", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        // sources: [
        //   {
        //     type: "",
        //     src : "" //url地址
        //   }
        // ], 
        sources: [],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true //全屏按钮
        }
      }
    };
     var para = {
        goods_id: this.goods_id
      };
  },

  methods: {
        onChange(index) {
          this.activeIndex = index+1
        },
       onClickVideo(){
           this.activeIndex = 1
           this.showImage = false
           this.showBox = true

       },
       onClickImages(){
           this.activeIndex = 2
           this.showImage = true
           this.showBox = false
       }
},
 
  mounted() {
    // console.log(this.$route.query.id,666)
    this.goods_id = this.$route.query.id;
    console.log(this.goods_id)

    let para = {
      goods_id: this.goods_id
    };
    //let para="/goods_id/57"
    getData
      .goodsDes(para)
      .then(res => {
        console.log(res, "数据获得的111111111");
        this.goodsdetail = res.data.data;
        this.goodsid = res.data.id;

        // console.log(this.goodsdetail, "9999999");
        this.attr_info = res.data.data.extra_info;
        this.goodsdes = res.data.data.content;
        this.coll = this.goodsdetail.is_collected;
        //判断是否有视频
        if(res.data.data.vedio_url&& res.data.data.vedio_url.length){
            this.showBox = true
            this.showImage = false
        }else{
            this.showImage = true
            this.showBox = false
        }
        let videoSource = {};
        videoSource.type = "video/mp4";
        this.playerOptions.poster = res.data.data.goods_images[0]//封面地址
        videoSource.src = res.data.data.vedio_url;
        this.playerOptions.sources[0] = videoSource;
        console.log(this.playerOptions,"playerOptions1111")
        if (this.attr_info.length == 0) {
          this.attr_flag = false;
        }
      })
      .catch(err => {});
  }
};
</script>

